import React from 'react';
import { GameMode } from '../types/game';
import { Users, Bot } from 'lucide-react';

interface ModeSelectionProps {
  onModeSelect: (mode: GameMode) => void;
}

export const ModeSelection: React.FC<ModeSelectionProps> = ({ onModeSelect }) => {
  return (
    <div className="min-h-screen bg-neutral-50 flex flex-col items-center justify-center p-4">
      <div className="max-w-4xl w-full">
        {/* 游戏标题 */}
        <div className="text-center mb-16">
          <h1 className="text-game-title-mobile md:text-game-title font-bold text-neutral-900 mb-4">
            五子棋对战
          </h1>
          <p className="text-body text-neutral-700 max-w-md mx-auto">
            选择对战模式，开始你的五子棋之旅
          </p>
        </div>

        {/* 模式选择卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto">
          {/* 人机对战 */}
          <button
            onClick={() => onModeSelect('ai')}
            className="
              group relative bg-neutral-100 hover:bg-primary-50 
              border-2 border-neutral-200 hover:border-primary-500
              rounded-lg p-12 transition-all duration-normal
              hover:transform hover:-translate-y-1 hover:shadow-card-hover
              focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
            "
          >
            <div className="flex flex-col items-center space-y-6">
              {/* 图标 */}
              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center group-hover:bg-primary-200 transition-colors duration-normal">
                <Bot className="w-8 h-8 text-primary-600" />
              </div>
              
              {/* 标题 */}
              <div className="text-center">
                <h3 className="text-mode-title-mobile md:text-mode-title font-semibold text-neutral-900 mb-2">
                  人机对战
                </h3>
                <p className="text-small text-neutral-700 leading-relaxed">
                  与AI智能对手对战，挑战你的策略思维
                </p>
              </div>
              
              {/* 特性标签 */}
              <div className="flex flex-wrap gap-2 justify-center">
                <span className="px-3 py-1 bg-primary-100 text-primary-700 text-xs rounded-full">
                  智能AI
                </span>
                <span className="px-3 py-1 bg-neutral-200 text-neutral-700 text-xs rounded-full">
                  难度适中
                </span>
                <span className="px-3 py-1 bg-neutral-200 text-neutral-700 text-xs rounded-full">
                  随时可玩
                </span>
              </div>
            </div>
          </button>

          {/* 双人对战 */}
          <button
            onClick={() => onModeSelect('pvp')}
            className="
              group relative bg-neutral-100 hover:bg-primary-50 
              border-2 border-neutral-200 hover:border-primary-500
              rounded-lg p-12 transition-all duration-normal
              hover:transform hover:-translate-y-1 hover:shadow-card-hover
              focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
            "
          >
            <div className="flex flex-col items-center space-y-6">
              {/* 图标 */}
              <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center group-hover:bg-primary-200 transition-colors duration-normal">
                <Users className="w-8 h-8 text-primary-600" />
              </div>
              
              {/* 标题 */}
              <div className="text-center">
                <h3 className="text-mode-title-mobile md:text-mode-title font-semibold text-neutral-900 mb-2">
                  双人对战
                </h3>
                <p className="text-small text-neutral-700 leading-relaxed">
                  与朋友面对面较量，体验传统对弈乐趣
                </p>
              </div>
              
              {/* 特性标签 */}
              <div className="flex flex-wrap gap-2 justify-center">
                <span className="px-3 py-1 bg-primary-100 text-primary-700 text-xs rounded-full">
                  两人同屏
                </span>
                <span className="px-3 py-1 bg-neutral-200 text-neutral-700 text-xs rounded-full">
                  轮流下棋
                </span>
                <span className="px-3 py-1 bg-neutral-200 text-neutral-700 text-xs rounded-full">
                  经典玩法
                </span>
              </div>
            </div>
          </button>
        </div>

        {/* 游戏规则说明 */}
        <div className="mt-16 max-w-2xl mx-auto">
          <div className="bg-white rounded-lg p-6 shadow-card">
            <h4 className="text-lg font-semibold text-neutral-900 mb-4 text-center">
              游戏规则
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-small text-neutral-700">
              <div className="space-y-2">
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
                  <span>黑棋先行，轮流下棋</span>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
                  <span>在15×15棋盘上对弈</span>
                </div>
              </div>
              <div className="space-y-2">
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
                  <span>率先连成五子者获胜</span>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
                  <span>支持横、竖、斜连线</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};